<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 组件</title>
    <style>
        .laoshu{
            background-color: aqua;
        }
        .cat{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <blog :title="msg" :age="age" :pbool="pbool" :parr="parr" :pobj="pobj"></blog>
        
    </div>

    <script src="../Day1/js/vue.js"></script>

    <script>
        //子组件
        Vue.component('blog',{
            props:['title','age','pbool','parr','pobj'],
            data:function(){
                return{

                }
            },
            template:`<div>
                <h1>测试组件</h1>
                    <P>字符串:{{title}}</p>

                    <p>数字:{{age*10}}</p>

                    <p>布尔:{{pbool}}</p>
                    
                    <p>数组:</p>
                    <li v-for='a in parr'>{{a}}</li>
                    
                    <p>对象:</p>
                    <li v-for='o in pobj'>{{o}}</li>
                </div>`
        })
        //父
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'父组件的值',
                age:18,
                pbool:true,
                parr:['西瓜','苹果','香蕉'],
                pobj:{
                    pname:'小明',
                    psex:'男'
                }
            },
            components:{
            }
        });
    </script>
</body>
</html>